<template>
  <div class="index-container">
    <Header title="参会报名">
    </Header>

    <div class="warpper">
      <van-form @submit="onSubmit" ref="userForm" @failed="onFail">
        <div class=" basicInfo-box">
          <div class="flex-center-between">
            <p class="basicInfo">个人基本信息</p>
            <van-tag v-if="selfUserInfo.shzt == '0'" type="warning">待审核</van-tag>
            <van-tag v-else-if="selfUserInfo.shzt == '1'" type="success">审核通过</van-tag>
            <van-tag v-else-if="selfUserInfo.shzt == '2'" type="danger">审核不通过</van-tag>
            <van-tag v-else type="primary">未提交参会信息</van-tag>
          </div>
          <p class="lable-item" v-if="selfUserInfo.shzt == '2'">审核不通过原因:{{ selfUserInfo.shyy }}</p>


        </div>

        <!--        是否管理人员-->
        <van-field
          v-model="selfUserInfo.ismanager" name="ismanager" readonly v-show="false"/>
        <!--        送站点-->
        <van-field v-model="selfUserInfo.szd" name="szd" readonly v-show="false"/>
        <!--        到站点-->
        <van-field v-model="selfUserInfo.dzd" name="dzd" readonly v-show="false"/>
        <!--        参会类型-->
        <van-field v-model="selfUserInfo.chlx" name="chlx" readonly v-show="false"/>
        <!--        参会类型细分类型-->
        <van-field v-model="selfUserInfo.chlx_xflx" name="chlx_xflx" readonly v-show="false"/>
        <!--        证件类型-->
        <van-field v-model="selfUserInfo.zjlx" name="zjlx" readonly v-show="false"/>
        <!--        出发省-->
        <van-field v-model="selfUserInfo.province" name="province" readonly v-show="false"/>
        <!--        出发市-->
        <van-field v-model="selfUserInfo.city" name="city" readonly v-show="false"/>
        <!--        居住地代码-->
        <van-field v-model="selfUserInfo.jzddm" name="jzddm" readonly v-show="false"/>
        <!--        交通方式-->
        <van-field v-model="selfUserInfo.traffic_type" name="traffic_type" readonly v-show="false"/>
        <!--        单位所在地-->
        <van-field v-model="selfUserInfo.dwszd" name="dwszd" readonly v-show="false"/>
        <!--        是否住宿-->
        <van-field v-model="selfUserInfo.sfzs" name="sfzs" readonly v-show="false"/>
        <!--        是否参加闭幕式-->
        <van-field v-model="selfUserInfo.sfcjbms" name="sfcjbms" readonly v-show="false"/>
        <!--        博士博士后人员类别-->
        <van-field v-model="selfUserInfo.bsrylb" name="bsrylb" readonly v-show="false"/>
        <!--        在读/毕业院校-->
        <!--        <van-field v-model="selfUserInfo.school" name="school" readonly v-show="false" />-->
        <!--        是否跟车-->
        <van-field v-model="selfUserInfo.sfgc" name="sfgc" readonly v-show="false"/>
        <!--        是否申请单间-->
        <van-field v-model="selfUserInfo.sfsqdj" name="sfsqdj" readonly v-show="false"/>
        <!--        团队编号-->
        <van-field v-model="selfUserInfo.tdbh" name="tdbh" readonly v-show="false"/>
        <!--        防疫编号-->
        <van-field v-model="selfUserInfo.fybh" name="fybh" readonly v-show="false"/>
        <!--        主键-->
        <van-field v-model="selfUserInfo.id" name="id" readonly v-show="false"/>
        <!--        有效标识-->
        <van-field v-model="selfUserInfo.aae100" name="aae100" readonly v-show="false"/>
        <!--        姓名-->
        <van-field v-model="selfUserInfo.xm" name="xm" label="姓名" placeholder="姓名" v-show="false" readonly/>
        <!--        证件号码-->
        <van-field v-model="selfUserInfo.idcard" name="idcard" readonly v-show="false"/>
        <!--        手机号码-->
        <van-field v-model="selfUserInfo.tel" name="tel" v-show="false" readonly/>
        <!--        单位编号-->
        <van-field v-model="selfUserInfo.dwbh" name="dwbh" v-show="false" readonly/>
        <van-field v-model="handleUserInfo.xm" name="zae019" label="最后操作人" v-show="false"/>
        <van-field v-model="handleUserInfo.id" name="zae011" label="最后操作人代码" v-show="false"/>
        <!--        是否现场参赛-->
        <!--        <van-field v-model="selfUserInfo.sfxccs" name="sfxccs" v-show="false" readonly/>-->
        <!--        以上为隐藏字段-->


        <!--        人员基本信息-->
        <van-field
          v-model="selfUserInfo.fakexm"
          name="fakexm"
          label="姓名"
          placeholder="请填写姓名"
          readonly
        />

        <van-field name="xb" label="性别" placeholder="请选择性别">
          <template #input>
            <van-radio-group disabled v-model="selfUserInfo.xb" direction="horizontal">
              <van-radio name="male">男</van-radio>
              <van-radio name="female">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-field
          v-model="selfUserInfo.zjlxValue"
          name="zjlxValue"
          label="证件类型"
          placeholder="请填写证件类型"
          readonly
        />

        <van-field
          v-model="selfUserInfo.fakeidcard"
          name="fakeidcard"
          label="证件号码"
          placeholder="请填写证件号码"
          readonly
        />
        <van-field
          v-model="selfUserInfo.faketel"
          name="faketel"
          label="手机号码"
          placeholder="请填写手机号码"
          readonly
        />

        <van-tabs>
          <!--          部不提供参赛信息，参赛信息代码暂时屏蔽-->
          <!--          参赛信息-->
          <!--          <van-tab title="参赛信息" v-if="isCsry">
                      <van-field
                        readonly
                        v-model="selfUserInfo.csd"
                        name="csd"
                        label="参赛队"
                        placeholder="请填写参赛队"
                        v-if="isCsry"
                        :rules="[{ required: isCsry }]"
                      />
                      <van-field
                        readonly
                        v-model="selfUserInfo.sz"
                        name="sz"
                        label="赛组"
                        placeholder="请填写赛组"
                        v-if="isCsry"
                        :rules="[{ required: isCsry }]"
                      />
                      <van-field
                        readonly
                        v-model="selfUserInfo.sd"
                        name="sd"
                        label="赛道"
                        placeholder="请填写赛道"
                        v-if="isCsry"
                        :rules="[{ required: isCsry}]"
                      />
                      <van-field
                        readonly
                        v-model="selfUserInfo.xmbh"
                        name="xmbh"
                        label="项目编号"
                        placeholder="请填写项目编号"
                        v-if="isCsry"
                        :rules="[{ required: isCsry }]"
                      />
                      <van-field
                        readonly
                        v-model="selfUserInfo.xmmc"
                        name="xmmc"
                        label="项目名称"
                        placeholder="请填写项目名称"
                        v-if="isCsry"
                        :rules="[{ required: isCsry}]"
                      />
                      <van-field
                        readonly
                        v-model="selfUserInfo.szh"
                        name="szh"
                        label="赛序号"
                        placeholder="请填写赛序号"
                        v-if="isCsry"
                        :rules="[{ required: isCsry}]"
                      />

                      &lt;!&ndash;            暂时暂停&ndash;&gt;
                      &lt;!&ndash;            <van-field&ndash;&gt;
                      &lt;!&ndash;              v-model="selfUserInfo.csdbd"&ndash;&gt;
                      &lt;!&ndash;              name="csdbd"&ndash;&gt;
                      &lt;!&ndash;              label="参赛代表队名称"&ndash;&gt;
                      &lt;!&ndash;              placeholder="参赛代表队名称"&ndash;&gt;
                      &lt;!&ndash;              readonly&ndash;&gt;
                      &lt;!&ndash;              v-if="isCsry"&ndash;&gt;
                      &lt;!&ndash;              :rules="[{ required: true, message: '请填写参赛代表队名称' }]"&ndash;&gt;
                      &lt;!&ndash;            />&ndash;&gt;
                    </van-tab>-->

          <!--          参会信息-->
          <van-tab title="参会信息">
            <van-field
              readonly
              clickable
              name="tdmc"
              v-model="selfUserInfo.tdmc"
              autocomplete="off"
              label="参会人员类别"
              placeholder="点击选择参会人员类别"
              type="textarea"
              rows="1"
              autosize
            />
            <van-field
              v-if="isDbd == 1"
              readonly
              clickable
              name="tdmc"
              v-model="selfUserInfo.tdmc1"
              autocomplete="off"
              label="参赛代表团名称"
              placeholder="点击选择参赛代表团名称"
            />
            <!--            人员参会类型-->
            <van-field
              v-if="showRylb"
              v-model="selfUserInfo.chlxValue"
              name="chlxValue"
              label="团队人员类别"
              placeholder="请填写团队人员类别"
              readonly
            />
            <van-field
              readonly
              clickable
              name="chlx_xflxValue"
              :value="selfUserInfo.chlx_xflxValue"
              label="人员细分类别"
              placeholder="点击选择人员细分类别"
              v-if="xflxShow"
            />

            <van-field
              name="parttime_chlx"
              label="兼职参会类型"
              v-if="showParttimeChlx"
            >
              <template #input>
                <van-checkbox-group disabled v-model="selfUserInfo.parttime_chlx" direction="horizontal">
                  <van-checkbox name="8" shape="square" :disabled="parttimeChlx8">管理服务联络员</van-checkbox>
                  <van-checkbox name="7" shape="square" :disabled="parttimeChlx7">宣传联络员</van-checkbox>
                  <van-checkbox name="11" shape="square" :disabled="parttimeChlx11">疫情防控联络员</van-checkbox>
                </van-checkbox-group>
              </template>
            </van-field>
            <van-field
              v-model="selfUserInfo.jzdmc"
              is-link
              readonly
              name="jzdmc"
              label="居住地"
              placeholder="请选择居住地"
              label-class="vaild"
              type="textarea"
              rows="1"
              autosize
            />
            <!--邮箱-->
            <!--            全部显示，且都是选填-->
            <van-field
              readonly
              v-model="selfUserInfo.email"
              name="email"
              label="邮箱"
              placeholder="请填写邮箱"

            />
            <!--            v-if="rcjlczdw || xqdw||ctjg||jszyjg||fhjg||bsh||bshtd||isReport"
                        :rules="[{ required: rcjlczdw||xqdw||ctjg||jszyjg||fhjg||bsh||bshtd }]"-->

            <!--            博士人员类别-->
            <van-field
              readonly
              clickable
              name="bsrylbValue"
              :value="selfUserInfo.bsrylbValue"
              label="人员类别"
              placeholder="点击选择人员类别"
              v-if="bsh||bshtd"
            />

            <!--专家不需要展示单位信息-->
            <van-field
              readonly
              :clickable="showPopup"
              v-model="selfUserInfo.dw"
              name="dw"
              label="单位"
              placeholder="请填写单位，如无请填“无”"
              v-if="!isPs"
              autocomplete="false"
            />
            <!--            单位所在地-->
            <van-field
              readonly
              clickable
              name="dwszdValue"
              :value="selfUserInfo.dwszdValue"
              :label="dwLabel"
              placeholder="点击选择单位所在地"
              v-if="rcjlczdw || xqdw||fhjg||bshtd"
            />

            <van-field
              readonly
              :clickable="schoolShow"
              v-model="selfUserInfo.school"
              name="school"
              label="在读/毕业院校"
              placeholder="请填写在读/毕业院校"
              v-if="bsh||bshtd"
            />

            <van-field
              readonly
              v-model="selfUserInfo.zy"
              name="zy"
              label="所学专业"
              placeholder="请填写所学专业"
              v-if="(bsh||bshtd) && showForGxlly"
            />

            <!--            是否跟车-->
            <van-field
              readonly
              clickable
              name="sfgcValue"
              :value="selfUserInfo.sfgcValue"
              label="是否跟车"
              placeholder="点击选择是否跟车"
              v-if="showGc && showForGxlly"
            />
            <van-notice-bar v-if="showGc && showForGxlly">
              提示：由大赛执委会统一接送，名额有限，具体由高校落实跟车名单；请根据发车时间合理安排交流会、闭幕式行程
            </van-notice-bar>

            <van-field
              readonly
              v-model="selfUserInfo.zw"
              name="zw"
              label="职务"
              placeholder="请填写职务，如无请填“无”"
            />
            <van-field
              readonly
              v-model="selfUserInfo.jzzh"
              name="jzzh"
              label="记者证号"
              placeholder="请填写记者证号"
              v-if="isReport"
            />
            <!--            <van-field-->
            <!--              readonly-->
            <!--              clickable-->
            <!--              name="sfxccsValue"-->
            <!--              :value="selfUserInfo.sfxccsValue"-->
            <!--              label="是否现场参赛(到佛山参赛)"-->
            <!--              placeholder="点击选择是否现场参赛"-->
            <!--              @click="showCommonPicker('sfxccs','sfxccs')"-->
            <!--              :rules="[{ required: true  }]"-->
            <!--            />-->
            <template v-if="showXccs">
              <!--            出发省-->
              <van-field
                readonly
                v-model="selfUserInfo.province"
                name="province"
                label="出发省"
                v-if="false"
              />
              <!--            出发城市-->
              <van-field
                name="city_name"
                v-model="selfUserInfo.city_name"
                is-link
                readonly
                label="出发城市"
                placeholder="请选择出发城市"
                label-class="vaild"
                v-if="showFor40"
                type="textarea"
                rows="1"
                autosize
              />
              <van-popup v-model="cityShow" round position="bottom">
                <van-cascader
                  v-model="selfUserInfo.city"
                  title="请选择所在地区"
                  :options="options"
                  @close="cityShow = false"
                  @finish="onFinish"
                />
              </van-popup>
              <!--            交通方式-->
              <van-field
                readonly
                clickable
                name="traffic_typeValue"
                :value="selfUserInfo.traffic_typeValue"
                label="交通方式"
                placeholder="点击选择交通方式"
                v-if="showFor40"
              />

              <van-field
                readonly
                clickable
                name="ddrq"
                :value="selfUserInfo.ddrq"
                label="到达时间"
                placeholder="点击选择到达时间"
                v-if="showFor40"
              />
              <van-field
                readonly
                v-model="selfUserInfo.ddhb"
                name="ddhb"
                label="到达航班/车次"
                placeholder="请填写到达航班/车次"
                v-if="dzRequire"
              />

              <van-field
                readonly
                clickable
                name="dzdValue"
                :value="selfUserInfo.dzdValue"
                label="到站点"
                placeholder="点击选择到站点"
                v-if="dzRequire"
              />

              <van-field
                readonly
                clickable
                :value="selfUserInfo.fcrq"
                name="fcrq"
                label="返程时间"
                placeholder="点击选择返程时间"
                v-if="showFor40"
              />
              <van-field
                readonly
                v-model="selfUserInfo.fchb"
                name="fchb"
                label="返程航班/车次"
                placeholder="请填写返程航班/车次"
                v-if="szRequire"
              />

              <van-field
                readonly
                clickable
                name="szdValue"
                :value="selfUserInfo.szdValue"
                label="送站点"
                placeholder="点击选择送站点"
                v-if="szRequire"
              />
              <van-field
                readonly
                clickable
                name="sfzsValue"
                :value="selfUserInfo.sfsqdjValue"
                label="是否申请单间"
                placeholder="点击选择是否申请单间"
              />
              <!--            是否代订住宿-->
              <van-field
                readonly
                clickable
                name="sfzsValue"
                :value="selfUserInfo.sfzsValue"
                label="是否住宿"
                placeholder="点击选择是否住宿"
                v-if="showFor40"
              />

              <van-field
                readonly
                clickable
                :value="selfUserInfo.rzrq"
                name="rzrq"
                label="入住日期"
                placeholder="点击选择入住日期"
                v-if="zsRequire"
              />

              <van-field
                readonly
                clickable
                :value="selfUserInfo.ldrq"
                name="ldrq"
                label="离店日期"
                placeholder="点击选择离店日期"
                v-if="zsRequire"
              />


              <!--        <van-field
                        disabled
                        v-model="selfUserInfo.kmszw"
                        name="kmszw"
                        label="开幕式座位"
                        placeholder="无"
                      />
                      <van-field
                        disabled
                        v-model="selfUserInfo.bmszw"
                        name="bmszw"
                        label="闭幕式座位"
                        placeholder="无"
                      />-->


              <!--        参会时间-->
              <van-field name="chsj"
                         label="请选择参会时间"
                         v-if="ctjg||bsh||bshtd"
              >
                <template #input>
                  <van-checkbox-group v-model="selfUserInfo.chsj" disabled direction="horizontal">
                    <van-checkbox name="11月19日" shape="square">11月19日</van-checkbox>
                    <van-checkbox name="11月20日" shape="square">11月20日</van-checkbox>
                    <van-checkbox name="11月21日" shape="square">11月21日</van-checkbox>
                  </van-checkbox-group>
                </template>
              </van-field>
              <!--是否参加闭幕式-->
              <van-field
                readonly
                clickable
                name="sfcjbmsValue"
                :value="selfUserInfo.sfcjbmsValue"
                label="是否参加闭幕式"
                placeholder="点击选择是否参加闭幕式"
              />
              <van-notice-bar>
                闭幕式时间：11月21日20:00-21:20，选择参加闭幕式后续进行席位安排，安排完成后发送短信通知。
              </van-notice-bar>
            </template>
            <van-field
              readonly
              v-model="selfUserInfo.spgmbz"
              name="spgmbz"
              label="禁忌(过敏)食物"
              placeholder="请填写禁忌(过敏)食物,没有则填写“无”"
            />
            <van-field
              readonly
              v-model="selfUserInfo.bz"
              name="bz"
              label="备注"
              placeholder="请填写备注"
            />
          </van-tab>
        </van-tabs>

        <template v-if="showXccs">
<!--          <van-field name="zj" label="证件照">-->
<!--            <template #input>-->
<!--              <div class="ylt-box flex-center-between">-->
<!--                <van-uploader-->
<!--                  disabled-->
<!--                  :deletable="false"-->
<!--                  v-model="selfUserInfo.zj"-->
<!--                  :after-read="afterRead('zj')"-->
<!--                  accept="image/*"-->
<!--                  :max-count="1"-->
<!--                  :max-size="maxSize"-->
<!--                  @oversize="onOversize"-->
<!--                  @delete="deletePic('zj')"-->
<!--                />-->
<!--                <div class="ylt-item" @click="preview('ylt')">-->
<!--                  <img src="~@/assets/img/ylt.jpg" class="ylt-img">-->
<!--                  <p class="ylt-text ">样例图</p>-->
<!--                </div>-->
<!--              </div>-->
<!--            </template>-->
<!--          </van-field>-->


<!--          <van-notice-bar wrapable :scrollable="false">-->
<!--            1.报名确认需上传电子照片， 请先下载照片处理工具<a class="down-load" href="gwyzpclgj.zip" download="证件照处理"-->
<!--          >（点击下载）</a-->
<!--          >或<span class="down-load" @click="copy">（复制连接）</span>到PC打开下载，请按<span-->
<!--            class="down-load"-->
<!--            @click="preview('zjz')"-->
<!--          >（操作指引）</span-->
<!--          >-->
<!--            对照片进行处理、保存，否则无法完成照片上传和后续相关操作。-->
<!--            <br/>-->
<!--            2.上传照片提示文字：-->
<!--            <br/>-->
<!--            （1）需上传本人真实照片，JPG或JPEG格式，文件大于30K小于2M，图片像素大小上限为960*960，下限为500*500；-->
<!--            <br/>-->
<!--            （2）面部无其他物体遮挡，头发至于耳朵后方，清楚展示人物面部，不要美图、P图等。-->
<!--          </van-notice-bar>-->
          <template v-if="develop">
            <van-field name="jkm" label="粤康码截图">
              <template #input>
                <van-uploader
                  disabled
                  :deletable="false"
                  v-model="selfUserInfo.jkm"
                  :after-read="afterRead('jkm')"
                  accept="image/*"
                  :max-count="1"
                  :max-size="maxSize"
                  @oversize="onOversize"
                  @delete="deletePic('jkm')"
                />
              </template>
            </van-field>
            <van-notice-bar>
              1.请按<span
              class="down-load"
              @click="preview('ykm')"
            >（粤康码操作指引）</span
            >
              进行截图、上传；<br/>
              2.抵达佛山前一天上传最新截图
            </van-notice-bar>

            <van-field name="xck" label="行程卡截图">
              <template #input>
                <van-uploader
                  disabled
                  :deletable="false"
                  v-model="selfUserInfo.xck"
                  :after-read="afterRead('xck')"
                  accept="image/*"
                  :max-count="1"
                  :max-size="maxSize"
                  @oversize="onOversize"
                  @delete="deletePic('xck')"
                />
              </template>
            </van-field>
            <van-notice-bar>
              1.请按<span
              class="down-load"
              @click="preview('xck')"
            >（行程卡操作指引）</span
            >
              进行截图、上传；<br/>
              2.抵达佛山前一天上传最新截图
            </van-notice-bar>

            <van-field name="jzqk" label="新冠疫苗接种情况">
              <template #input>
                <van-uploader
                  disabled
                  :deletable="false"
                  v-model="selfUserInfo.jzqk"
                  :after-read="afterRead('jzqk')"
                  accept="image/*"
                  :max-count="1"
                  :max-size="maxSize"
                  @oversize="onOversize"
                  @delete="deletePic('jzqk')"
                />
              </template>
            </van-field>
            <van-notice-bar>
              抵达佛山前一天上传最新截图
            </van-notice-bar>
          </template>
          <div class="flex-center develop-box" @click="develop=!develop">
            <van-icon :name="develop ?  'arrow-up' :'arrow-down'" size="25"/>
            {{ develop ? '收起' : '展开' }}
          </div>

        </template>

        <!--        <van-field name="bshsfzm"-->
        <!--                   v-if="bsh"-->
        <!--                   label="博士博士后身份证明">-->
        <!--          <template #input>-->
        <!--            <van-uploader-->
        <!--              v-model="selfUserInfo.bshsfzm"-->
        <!--              :after-read="afterRead('bshsfzm')"-->
        <!--              accept="image/*"-->
        <!--              :max-count="1"-->
        <!--              :max-size="maxSize"-->
        <!--              @oversize="onOversize"-->
        <!--              @delete="deletePic('bshsfzm')"-->
        <!--            />-->
        <!--          </template>-->
        <!--        </van-field>-->
        <!--        <van-notice-bar-->
        <!--          v-if="bsh">-->
        <!--          “博士博士后身份证明”用于资格审核，可提供学信网截图-->
        <!--        </van-notice-bar>-->

        <!--        <van-field name="sftycns" :rules="[{ required: true, message: '请阅读并同意疫情防控安全承诺书' }]">
                  <template #input>
                    <van-checkbox v-model="selfUserInfo.sftycns" shape
                    ><p @click.stop="dialogCns">请阅读并同意疫情防控安全承诺书</p></van-checkbox
                    >
                  </template>
                </van-field>-->

        <!--专家或参赛人员需要显示提示信息-->
        <van-notice-bar v-if="isCsry || isPs" :text="noticeMsg"/>

        <!--        <div class="two-btn" v-show="false">-->
        <!--          <van-button class="btn" round type="danger" @click="rollback" native-type="button"-->
        <!--                      v-if="selfUserInfo.shzt=='0' && parseInt(selfUserInfo.chlx)>3">撤回-->
        <!--          </van-button>-->
        <!--          <van-button class="btn" round type="info" native-type="submit">提交</van-button>-->
        <!--        </div>-->
      </van-form>

      <!-- 日历组件-->
      <van-calendar v-model="arrivesShowCalendar"
                    :min-date="minDate"
                    :max-date="maxDate"
                    @confirm="arriveCalenderConfirm"/>
      <!--站点组件-->
      <van-popup v-model="zdShowPicker" position="bottom">
        <van-picker
          value-key="value"
          show-toolbar
          :columns="zdColumns"
          @confirm="zdOnConfirm"
          @cancel="zdShowPicker = false"
        />
      </van-popup>

      <van-popup
        position="bottom"
        v-model="dateTimePicker">
        <van-datetime-picker
          v-model="currentDate"
          type="datetime"
          title="请选择时间"
          @confirm="datetimeConfirm"
          :min-date="dateTimeMinDate"
          :max-date="dateTimeMaxDate"
          :formatter="datetimeFormatter"
        />
      </van-popup>


      <!--      通用picker组件-->
      <van-popup v-model="commonPicker" position="bottom">
        <van-picker
          value-key="value"
          show-toolbar
          :columns="commonColumns"
          @confirm="commonOnConfirm"
          @cancel="commonPicker = false"
        />
      </van-popup>

      <!--      疫情承诺书-->
      <van-dialog v-model="showCns" show-cancel-button @confirm="cnsConfirm" @cancel="selfUserInfo.sftycns = false">
        <div class="content">
          <div v-html="wordText"></div>
        </div>
      </van-dialog>

      <!--      证件照操作指引-->
      <div class="overlay" v-if="czzyShow">
        <van-icon name="close" class="i-close" @click="czzyShow = false" color="red" size="25"/>
        <van-swipe vertical style="height:100%;width: 100%">
          <van-swipe-item v-for="(image, index) in czzyImages" :key="index">
            <img v-lazy="image" class="full-width-height"/>
          </van-swipe-item>
        </van-swipe>
      </div>

      <!--   人才交流参展单位名单（230家）   -->
      <van-popup v-model="showPopup" position="bottom" class="popup">
        <van-sticky offset-top="0">
          <van-search
            v-model="dwName"
            show-action
            shape="round"
            background="#017bd3"
            placeholder="请输入单位名称进行搜索"
            @search="dwSearch"
            @clear="dwSearch"
          >
            <template #action>
              <div class="search-btn" @click.stop="dwSearch">搜索</div>
            </template>
          </van-search>
        </van-sticky>
        <van-picker value-key="value"
                    show-toolbar autofocus
                    toolbar-position="bottom"
                    :columns="dwColumns"
                    @confirm="dwConfirm"
                    @cancel="cancleDw"
        >
        </van-picker>
      </van-popup>
      <!--         人才交流参会博士博士后选择院校信息专用-->
      <van-popup v-model="schoolShow" position="bottom" class="popup">
        <van-sticky offset-top="0">
          <van-search
            v-model="schoolName"
            show-action
            shape="round"
            background="#017bd3"
            placeholder="请输入学校名称进行搜索"
            @search="schoolSearch"
            @clear="schoolSearch"
            autofocus
          >
            <template #action>
              <div class="search-btn" @click.stop="schoolSearch">搜索</div>
            </template>
          </van-search>
        </van-sticky>
        <van-picker value-key="value"
                    show-toolbar
                    toolbar-position="bottom"
                    :columns="schoolList"
                    @confirm="confirmSchool"
                    @cancel="schoolShow = false"
        >
        </van-picker>
      </van-popup>

    </div>
  </div>
</template>

<script>
import { revokeDoctorUser, loadUserInfo } from 'api/userInfo'
import minixUploadPic from '@/minix/minixUploadPic'
import minixUserSave from '@/minix/minixUserSave'
import minixCalendar from '@/minix/minixCalendar'
import minixLoadPic from '@/minix/minixLoadPic'
import minixZd from '@/minix/minixZd'
import picUtil from '@/utils/picUtil'
import { provinceCity, Site, chlxArray, csryColumns, teamData, zjlx, sfzs, traffic_type, codeList } from '@/utils/code'
import { getSelfInfo } from '@/utils/tokenUtil'
import { getWordText } from '@/utils/covertWord'
import minixCommonPicker from '../../minix/minixCommonPicker'
import { getRealArrData, returnArray, parseTime } from '@/utils/'
import { rcDwData, cgDwData } from '@/utils/dwCode'
import { xflx } from '../../utils/code'

let dwData = []
export default {
  name: 'teamRace',
  props: {
    // userInfo:{type:Object}
    id: { default: null }
  },
  mixins: [minixUploadPic, minixCalendar, minixLoadPic, minixUserSave, minixZd, minixCommonPicker], //复用mixin
  data() {
    return {
      // selfUserInfo:{...this.userInfo},
      selfUserInfo: {},
      handleUserInfo: {},// 操作人
      arrivesShowCalendar: false,
      calendarNanme: null,
      picArray: [picUtil.zj, picUtil.jkm, picUtil.xck, picUtil.jzqk],
      zdShowPicker: false,
      zdColumns: Site,
      zdFieldName: '',
      isOther: false,
      isOtherMsg: '',
      wordText: '',
      showCns: false,
      noticeMsg: '默认信息',
      commonPicker: false,
      commonColumns: [],
      commonFieldName: '',
      //入住、离店日期限制
      minDate: new Date(2021, 10, 1),
      maxDate: new Date(2021, 10, 30),
      // 省市字段控制
      cityShow: false,
      cityValue: '',
      options: provinceCity,
      //到达航班、到站点是否必填设置
      dzRequire: false,
      //返程航班、到站点是否必填设置
      szRequire: false,
      //是否住宿
      zsRequire: false,
      czzyShow: false,
      czzyImages: [],
      // 个性化字段控制显示
      //人才交流参展单位 chlx=18
      rcjlczdw: false,
      //科研成果转化对接需求单位 chlx=35、揭榜领题对接需求单位 chlx=36
      xqdw: false,
      //创投机构 chlx=37
      ctjg: false,
      //技术转移机构 chlx=38
      jszyjg: false,
      //孵化机构、高新技术园区 chlx =39
      fhjg: false,
      //人才交流参会博士博士后 chlx =57
      bsh: false,
      //揭榜领题对接参会博士博士后及团队 chlx=41
      bshtd: false,
      dwLabel: '单位所在地',
      maxSize: 2000 * 1024,
      showPopup: false,
      dwColumns: [],
      dwName: '',
      schoolShow: false,
      schoolLoading: false,
      schoolList: codeList.school,
      schoolName: '',
      //是否显示跟车信息
      showGc: false,
      showFor40: true,
      dateTimePicker: false,
      dateTimeMinDate: new Date(2021, 10, 1),
      dateTimeMaxDate: new Date(2021, 11, 31),
      currentDate: new Date(),
      xflxShow: false,

      showParttimeChlx: false,
      parttimeChlx8: false,
      parttimeChlx7: false,
      parttimeChlx11: false,

      // 高校联络员隐藏的字段
      showForGxlly: true,

      // 团队人员类别
      rylbColumns: [],
      isDbd: 0,
      showPickerTeam: false,
      showPickerCsry: false,
      csryColumns,
      teamData,
      showRylb: false,
      // 是否现场参赛
      showXccs: true,
      develop: false
    }
  },

  mounted() {
    this.handleUserInfo = getSelfInfo()
    // console.log('团队参赛信息挂载')
    this.loadUserInfo()

  },
  methods: {
    rollback() {
      revokeDoctorUser({
        id: this.selfUserInfo.id,
        zae011: this.selfUserInfo.id,
        zae019: this.selfUserInfo.xm
      }).then(res => {
        if (res.code == '200') {
          this.$dialog.alert({
            message: '撤回成功'
          }).then(() => {
            this.loadUserInfo()
          })
        } else {
          this.$dialog.alert({
            title: '失败提示',
            message: res.msg
          })
        }
      })
    },
    preview(type) {
      let imgArr
      if (type == 'zjz') {
        imgArr = [require('../../../src/assets/img/zjzCzzy/zjz-czzy1.png'), require('../../../src/assets/img/zjzCzzy/zjz-czzy2.png'), require('../../../src/assets/img/zjzCzzy/zjz-czzy3.png'), require('../../../src/assets/img/zjzCzzy/zjz-czzy4.png')]
      } else if (type == 'ykm') {
        imgArr = [require('../../../src/assets/img/ykmCzzy/ykm-czzy1.jpg'), require('../../../src/assets/img/ykmCzzy/ykm-czzy2.jpg'), require('../../../src/assets/img/ykmCzzy/ykm-czzy3.jpg'), require('../../../src/assets/img/ykmCzzy/ykm-czzy4.jpg'), require('../../../src/assets/img/ykmCzzy/ykm-czzy5.jpg')]
      } else if (type == 'xck') {
        imgArr = [require('../../../src/assets/img/xck-czzy.jpg')]
      } else if (type == 'ylt') {
        imgArr = [require('../../../src/assets/img/ylt.jpg')]
      }
      this.czzyImages = imgArr
      this.czzyShow = true
    },
    inputOrChooseDw() {
      // 人才交流参展单位 chlx=18
      // 博士后工作成果参展单位代表 chlx=10
      if (this.selfUserInfo.chlx == '18') {
        dwData = rcDwData
        this.showPopup = true
      } else if (this.selfUserInfo.chlx == '10') {
        dwData = cgDwData
        this.showPopup = true
      } else {
        this.selfUserInfo.dwbh = ''
        this.showPopup = false
      }
      this.dwColumns = dwData
      console.log(this.selfUserInfo.chlx)
    },
    dwConfirm(item) {
      this.selfUserInfo.dw = item.value
      this.selfUserInfo.dwbh = item.key
      this.cancleDw()
    },
    cancleDw() {
      this.dwName = ''
      this.dwColumns = dwData
      this.showPopup = false
    },
    // 单位查询
    dwSearch(name) {
      if (this.dwName.length > 0) {
        this.dwColumns = dwData.filter(item => item.value.indexOf(this.dwName) != -1)
      } else {
        this.dwColumns = dwData
      }
    },
    schoolSearch() {
      if (this.schoolName.length > 0) {
        this.schoolList = codeList.school.filter(item => item.value.indexOf(this.schoolName) != -1)
      } else {
        this.schoolList = codeList.school
      }
    },
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.cityShow = false
      this.cityValue = selectedOptions.map((option) => option.text).join('/')
      this.selfUserInfo.province = selectedOptions[0].value
    },
    copy() {
      this.$copyText('https://ggfw.hrss.foshan.gov.cn/fsPostDoctorApp/gwyzpclgj.zip')
      this.$notify({ type: 'success', message: '复制成功' })
    },
    dialogCns() {
      if (this.wordText) {
        this.showCns = true
      } else {
        getWordText('cns.docx').then(html => {
          this.wordText = html
          this.showCns = true
        })
      }
    },
    cnsConfirm() {
      this.$dialog
        .alert({
          title: '提示',
          message: '<span style=\'color:red;font-weight:bold;\'>注：同意勾选疫情防控安全承诺书的有效期是到大赛结束</span>'
        })
        .then(() => {
          this.selfUserInfo.sftycns = true
        })
    },
    getArrData(field, key, arr) {
      //获取真实的字段代码值
      arr = getRealArrData(arr)
      let data = arr.filter(item => item.key == key)
      if (data.length > 0) {
        this.$set(this.selfUserInfo, field + 'Value', data[0].value)
      }
    },

    loadUserInfo() {
      let queryId = null
      if (!!this.id) {
        queryId = this.id
      } else {
        queryId = getSelfInfo().id
      }
      loadUserInfo({ id: queryId })
        .then(res => {
          // console.log('个人信息数据加载成功')
          let rs = JSON.parse(res.data)
          rs = rs[0]
          this.selfUserInfo = { ...rs }
          //  初始化参会人员类别，参赛代表团名称，团队人员类别
          let tdbh = parseInt(this.selfUserInfo.tdbh), chlxKey
          if (tdbh > 0 && tdbh <= 47) {
            chlxKey = 99
          } else {
            chlxKey = tdbh
          }
          let teamData = returnArray(chlxArray, 'key', chlxKey)
          if (teamData.length > 0) {
            if (teamData[0].showChild && teamData[0].hasOwnProperty('child')) {
              this.rylbColumns = returnArray(teamData[0].child, 'show', true)
              this.showRylb = true
            }
          }
          // this.selfUserInfo.uploadpicture = []
          if (!!!this.selfUserInfo.cpsj) {
            this.selfUserInfo.cpsj = []
          } else {
            this.selfUserInfo.cpsj = JSON.parse(this.selfUserInfo.cpsj)
          }
          //初始化下拉选项信息
          this.getArrData('dzd', this.selfUserInfo.dzd, Site)
          this.getArrData('szd', this.selfUserInfo.szd, Site)
          this.getArrData('chlx', this.selfUserInfo.chlx, chlxArray)
          this.getArrData('zjlx', this.selfUserInfo.zjlx, zjlx)
          this.getArrData('sfzs', this.selfUserInfo.sfzs, sfzs)
          this.getArrData('sfsqdj', this.selfUserInfo.sfsqdj, codeList.is_yes_or_no)
          this.getArrData('traffic_type', this.selfUserInfo.traffic_type, traffic_type)
          this.getArrData('dwszd', this.selfUserInfo.dwszd, codeList.dwszd)
          this.getArrData('sfcjbms', this.selfUserInfo.sfcjbms, codeList.sfcjbms)
          this.getArrData('bsrylb', this.selfUserInfo.bsrylb, codeList.bsrylb)
          this.getArrData('sfgc', this.selfUserInfo.sfgc, codeList.sfgc)
          this.getArrData('chlx_xflx', this.selfUserInfo.chlx_xflx, codeList.chlx_xflx)
          this.getArrData('sfxccs', this.selfUserInfo.sfxccs, codeList.sfxccs)
          // // 是否到现场参赛，隐藏住宿证件照上传
          // if (this.selfUserInfo.sfxccs == '01') {
          //   this.showXccs = true
          // } else if (this.selfUserInfo.sfxccs == '02') {
          //   this.showXccs = false
          // }
          //初始化到达日期和返程日期时间戳
          if (!!this.selfUserInfo.ddrq) {
            let ddd = new Date(this.selfUserInfo.ddrq)
            this.selfUserInfo.ddrq = parseTime(ddd)
          }
          if (!!this.selfUserInfo.fcrq) {
            let ddd = new Date(this.selfUserInfo.fcrq)
            this.selfUserInfo.fcrq = parseTime(ddd)
          }

          //初始化是否显示参会类型的细分人员类别(天津队伍的工作人员类型才有细分)
          if (this.selfUserInfo.tdbh == 2 && this.selfUserInfo.chlx == 12) {
            this.xflxShow = true
          }

          //初始化参会人员类别显示
          if (this.selfUserInfo.tdbh <= 47) {
            this.selfUserInfo['tdmc1'] = this.selfUserInfo.tdmc
            this.selfUserInfo['tdmc'] = '参赛代表团'
            this.isDbd = 1
          } else {
            this.selfUserInfo['tdmc'] = this.selfUserInfo.tdmc
            this.isDbd = 0
          }
          //初始化交通方式影响站点的信息
          this.trafficOnChange('traffic_type', this.selfUserInfo.traffic_type)
          //初始化是否住宿影响入住和离店信息
          this.zsOnChange('sfzs', this.selfUserInfo.sfzs)
          //初始化是否跟车影响其他行程信息
          this.actionFor40()
          //初始化【人才交流参会博士博士后】团队的高校联络员
          if (this.selfUserInfo.chlx == '40' && this.selfUserInfo.bsrylb == '05') {
            this.bsrylbOnChange('bsrylb', this.selfUserInfo.bsrylb)
          }
          //初始化个性化字段显示
          this.initSpecificField()
          // 初始化参会时间
          if (!!!this.selfUserInfo.chsj) {
            this.selfUserInfo.chsj = []
          } else {
            this.selfUserInfo.chsj = JSON.parse(this.selfUserInfo.chsj)
          }
          //初始化兼职参会类型
          if (!!!this.selfUserInfo.parttime_chlx) {
            this.selfUserInfo.parttime_chlx = []
          } else {
            this.selfUserInfo.parttime_chlx = JSON.parse(this.selfUserInfo.parttime_chlx)
          }
          //初始化兼职的参会类型，只给团队参赛的参会类型为管理服务联络员、宣传联络员、疫情防控联络员三种显示
          this.showParttime()

          //身份证类的的人员自动初始化性别
          if (!!!this.selfUserInfo.xb && this.selfUserInfo.zjlx == '01') {
            this.selfUserInfo.xb = this.getSex(this.selfUserInfo.idcard)
          }

          //初始化图片信息
          // this.loadPic(this.picArray)

        })
    },
    initSpecificField() {
      this.bshtd = false
      this.bsh = false
      this.fhjg = false
      this.jszyjg = false
      this.ctjg = false
      this.xqdw = false
      this.rcjlczdw = false
      this.dwLabel = '单位所在地'
      //个性化字段展示
      if (this.selfUserInfo.chlx == '18') {
        // 人才交流参展单位
        this.rcjlczdw = true
        /*单位（可以搜索指定210家单位），通用字段不处理
        单位所在地
        邮箱
        是否代订住宿，通用字段不处理
        是否参加闭幕式
        */
      } else if (this.selfUserInfo.chlx == '35' || this.selfUserInfo.chlx == '36') {
        //科研成果转化对接需求单位 chlx=35、揭榜领题对接需求单位 chlx=36
        this.xqdw = true
        /*单位所在地
        邮箱
        是否代订住宿，通用字段不处理
        是否参加闭幕式*/
      } else if (this.selfUserInfo.chlx == '37') {
        //创投机构 chlx=37
        this.ctjg = true
        /*邮箱
        是否代订住宿，通用字段不处理
        参会时间
        是否参加闭幕式*/
      } else if (this.selfUserInfo.chlx == '38') {
        //技术转移机构 chlx=38
        this.jszyjg = true
        /*邮箱
        是否代订住宿，通用字段不处理
        是否参加闭幕式*/
      } else if (this.selfUserInfo.chlx == '39') {
        //孵化机构、高新技术园区 chlx =39
        this.fhjg = true
        /*单位所在地
        邮箱
        是否代订住宿，通用字段不处理
        是否参加闭幕式*/
      } else if (this.selfUserInfo.chlx == '40') {
        //人才交流参会博士博士后 chlx =40
        this.bsh = true
        this.dwLabel = '高校所在地'
        /*邮箱
        博士博士后人员类别
        高校所在地(单位所在地)
        在读/毕业院校
        所学专业
        是否跟车
        是否代订住宿，通用字段不处理
        参会时间
        是否参加闭幕式
        上传博士博士后身份证明名称（图片上传）*/
        // this.picArray.push(picUtil.bshsfzm)
      } else if (this.selfUserInfo.chlx == '41') {
        //揭榜领题对接参会博士博士后及团队 chlx=41
        this.bshtd = true
        /*单位所在地
        邮箱
        博士博士后人员类别
        在读/毕业院校
        所学专业
        是否代订住宿，通用字段不处理
        参会时间
        是否参加闭幕式*/
      }

    },
    showParttime() {
      if (this.selfUserInfo.tdbh <= 47 &&
        (this.selfUserInfo.chlx == 8 || this.selfUserInfo.chlx == 7 || this.selfUserInfo.chlx == 11)
      ) {
        this.showParttimeChlx = true
        if (this.selfUserInfo.chlx == '8') {
          this.parttimeChlx8 = true
          this.parttimeChlx7 = false
          this.parttimeChlx11 = false
        }
        if (this.selfUserInfo.chlx == '7') {
          this.parttimeChlx7 = true
          this.parttimeChlx8 = false
          this.parttimeChlx11 = false
        }
        if (this.selfUserInfo.chlx == '11') {
          this.parttimeChlx11 = true
          this.parttimeChlx7 = false
          this.parttimeChlx8 = false
        }
      } else {
        this.showParttimeChlx = false
        this.parttimeChlx7 = false
        this.parttimeChlx11 = false
        this.parttimeChlx8 = false
      }
    },
    showSchoolDialog() {
      if (this.selfUserInfo.chlx == '40') {
        this.schoolShow = true
      } else {
        this.schoolShow = false
      }
    },
    chooseSchool(item) {
      this.schoolName = item
    },
    confirmSchool(item) {
      this.selfUserInfo.school = item.key
      this.schoolShow = false
      this.schoolName = ''
      this.schoolList = codeList.school
      this.actionFor40()
    },
    actionFor40() {
      this.showGc = false
      if (this.selfUserInfo.chlx == '40' && this.selfUserInfo.bsrylb != '05') {
        //检查学校名称是否在指定的院校名单内，如果是，显示是否跟车
        codeList.school.forEach(s => {

          if (s.key == this.selfUserInfo.school) {
            // 显示跟车
            this.showGc = s.isGc
          }
        })
        if (!this.showGc) {
          this.selfUserInfo.sfgc = ''
          this.selfUserInfo.sfgcValue = ''
        }
        //指定学校会影响是否跟车选项的显示
        this.gcOnChange('sfgc', this.selfUserInfo.sfgc)
      }
    },
    getSex(zjhm) {
      if (!!zjhm) {
        if (zjhm.length == 18 && zjhm.substr(16, 1) % 2 == 1) {
          return 'male'
        } else if (zjhm.length == 18 && zjhm.substr(16, 1) % 2 == 0) {
          return 'female'
        } else if (zjhm.length == 15 && zjhm.substr(14, 1) % 2 == 1) {
          return 'male'
        } else if (zjhm.length == 15 && zjhm.substr(14, 1) % 2 == 0) {
          return 'female'
        }
      } else {
        return null
      }
    }
  },
  computed: {
    // 1.参赛选手不能修改
    // 2.当审核状态为待提交，审核不通过时才能修改参会人员类别，参赛代表团名称，团队人员类别
    isUpdate() {

      console.log(this.id, this.handleUserInfo.id)
      if (this.id != null) {
        if (this.id != this.handleUserInfo.id) {
          return false
        }
      } else {
        if (this.selfUserInfo.chlx == '1' || this.selfUserInfo.chlx == '2' || this.selfUserInfo.chlx == '3') {
          return false
        }
        if (this.selfUserInfo.shzt == '0' || this.selfUserInfo.shzt == '1') {
          return false
        }
      }
      return true
    },
    isCsry() {
      //判断是否为参赛人员，包括创新赛参赛选手、创业赛参赛选手、揭榜领题赛参赛选手
      if (this.selfUserInfo.chlx == '1' || this.selfUserInfo.chlx == '2' || this.selfUserInfo.chlx == '3') {
        this.noticeMsg = '请在11月18日 14:00前到达赛馆参加彩排'
        return true
      } else {
        return false
      }
    },
    isReport() {
      if (this.selfUserInfo.chlx == '9') {
        // 随行媒体人员
        return true
      } else {
        return false
      }
    },
    isPs() {
      //判断是否为评审专家
      if (this.selfUserInfo.chlx == '16') {
        //评审专家
        this.noticeMsg = '请在11月18日 16:00前到达专家会议地点参会'
        return true
      } else {
        return false
      }
    }
  }
}
</script>

<style lang="scss" scoped>

.warpper {
  .basicInfo-box {
    background-color: white;
    padding: 20px 10px 5px;


    .basicInfo {
      font-size: 24px;
      font-weight: bold;
    }

    .lable-item {
      font-size: 14px;
      color: red;
      margin-top: 10px;
      word-break: break-all;
    }

  }


  .down-load {
    display: inline;
    color: red;
  }

  /deep/ .van-dialog {
    height: 80%;
    display: flex;
    flex-direction: column;

    .van-dialog__content {
      overflow-y: scroll;
      padding: 20px 10px;
      box-sizing: border-box;
      flex: 1;

      h1 {
        text-align: center;
        margin-bottom: 10px;
        line-height: 40px;
      }
    }
  }

  .school-bg {
    background-color: #017bd3;
    padding: 10px 15px;

    .school-field {
      padding-top: 0;
      padding-bottom: 0;
      line-height: 35px;
      height: 35px;
      border-radius: 5px;
    }
  }

  .botton-btn {
    display: flex;
    align-items: center;
    border-top: 1px solid #e8e8e8;
    width: 100%;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;

    .btn {
      flex: 1;
      text-align: center;
      font-size: 14px;
      color: #017bd3;

      &:first-child {
        border-right: 1px solid #e8e8e8;
        color: red;
      }
    }
  }

  .search-btn {
    color: white;
    font-size: 15px;
    margin: 0 10px;
  }

  .popup {
    /deep/ .van-picker__toolbar {
      justify-content: normal;
      border-top: 1px solid #e8e8e8;

      button {
        flex: 1;
        text-align: center;
        font-size: 14px;
        color: #017bd3;

        &:first-child {
          border-right: 1px solid #e8e8e8;
          color: red;
        }
      }
    }

    .school-cell {
      height: 300px;
      overflow-y: scroll;
    }
  }

  .overlay {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .7);
    z-index: 200;

    .i-close {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 10;
    }

    .full-width-height {
      width: 100%;
      height: 100%;
    }
  }

  /deep/ .van-picker-column__wrapper {
    .van-ellipsis {
      white-space: break-spaces;
    }
  }

  .two-btn {
    padding: 0 20px;
  }

  .develop-box {
    padding: 15px 0;
    background-color: white;
    font-size: 14px;

  }

  .ylt-box {
    width: 100%;

    .ylt-item {
      width: 80px;
      height: 80px;
      margin: 0 9px 9px 0;
      border-radius: 5px;
      position: relative;

      &:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0px;
        right: 0px;
        background: rgba(0, 0, 0, 0.4);
        height: 100%;
        z-index: 0;
        border-radius: 5px;
      }

      .ylt-img {
        border-radius: 5px;
        width: 100%;
        height: 100%;
      }

      .ylt-text {
        color: white;
        font-size: 13px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
      }
    }

  }
}
</style>
